<!-- 分类 -->
<template>
	<view class="category-box">
		<image class="ka" @click="hui(listshis[0].level)" :src="listshis[0].image"></image>
		<!-- <image class="ka" @click="hui(listshis[1].level)" :src="listshis[1].image"></image> -->
		<view class="ti_name">服务项目</view>
		<view class="list">
			<view class="box" v-for="x,y in list" @click="yueu(x.type_id)">
				<image :src="x.images"></image>
				<view class="name">{{x.title}}</view>
			</view>
		</view>
		<!-- <view v-if="listshi[0].file!='https://sucai.bangzuke.com'" class="list">
			<view class="box" v-for="x,y in listt" @click="yueu(x.id)">
				<image :src="x.url"></image>
				<view class="name">{{x.name}}</view>
			</view>
		</view> -->
		<view class="ti_name">法律服务</view>
		<!-- 分类选项卡 -->
		<sh-category-tabs
			v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
			:enable="enable" :styleType="categoryTabsData.style" :tabsList="categoryTabsData.category_arr">
		</sh-category-tabs>
		<!-- 秒杀-->
		<!-- <block v-for="(item, index) in homeTemplate" :key="item.id">
				<sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill>
		</block> -->
		<view class="a"></view>
		<!-- <sh-seckill  :detail="item.content"></sh-seckill> -->
		<!-- 三级分类 -->
		<!-- <three-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 4"></three-catgory> -->
		<!-- 二级分类 -->
		<!-- <two-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 3"></two-catgory> -->
		<!-- 一级分类-->
		<!-- <one-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 2"></one-catgory> -->
		<!--直接购买，点餐 -->
		<!-- <takeout-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 1"></takeout-catgory> -->
		<!-- 登录提示 -->
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		<!-- <shopro-tabbar></shopro-tabbar> -->
		<!-- <gmy-float-touch :imgLists="imgLists" :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch> -->
	</view>
</template>

<script>
	import takeoutCatgory from './category/takeout-catgory.vue';
	import threeCatgory from './category/three-catgory.vue';
	import twoCatgory from './category/two-catgory.vue';
	import oneCatgory from './category/one-catgory.vue';
	import shSeckill from './components/sh-seckill.vue';
		import gmyFloatTouch from "@/components/gmy-float-touch/gmy-float-touch.vue";
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import shCategoryTabs from './components/sh-category-tabs.vue';
	export default {
		components: {
			takeoutCatgory,
			threeCatgory,
			twoCatgory,
			oneCatgory,
			shSeckill,
			shCategoryTabs,
			gmyFloatTouch,
		},

		data() {
			return {
				enable:true,
				categoryType: 0, //1:快速购买,2:一级分类，3:二级分类，4:三级分类
				categoryStyleId: 0, //分类Id
				list:[],
				listt: [{
						url: '../../static/images/zss1.png',
						name: '企业法务咨询',
						id: 0
					},
					{
						url: '../../static/images/zss2.png',
						name: '加油',
						id: 0
					},
					{
						url: '../../static/images/zss3.png',
						name: '违章',
						id: 0
					},
					{
						url: '../../static/images/zss4.png',
						name: '洗车保养',
						id: 1
					},
					{
						url: '../../static/images/zss5.png',
						name: '拖车',
						id: 2
					},
					{
						url: '../../static/images/zss6.png',
						name: '搭电',
						id: 3
					},
					{
						url: '../../static/images/zss7.png',
						name: '审车',
						id: 4
					},
					{
						url: '../../static/images/zss8.png',
						name: '挂牌过户',
						id: 5
					},
					{
						url: '../../static/images/zss9.png',
						name: '第三方检测',
						id: 6
					}
				],
				listshis: '',
				listshist:''
			};
		},
		computed: {
			...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin', 'authType']),
			// 头部模块数据
			headSwiperList() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[0]?.content?.list;
				}
			},
			// 分类选项卡数据
			categoryTabsData() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[this.homeTemplate.length - 1]?.content;
				}
			}

		},
		// computed: {
		// 	...mapGetters(['isLogin', 'authType']),
		// 	navbarHeight() {
		// 		// #ifdef APP-PLUS || H5
		// 		return 48;
		// 		// #endif
		// 		// #ifdef MP
		// 		let height = systemInfo.platform == 'ios' ? 44 : 48;
		// 		return height;
		// 		// #endif
		// 	}
		// },
		onLoad() {
			this.getCategory();
			this.lvshis_s()
			this.kaiguan()
			this.lvshis_st()
		},
		methods: {
			lvshis_st() {
				this.$http('addons.article_banner', {
					id: 5,
				}).then(res => {
					console.log(res.data[0].file, "视频")
					if (res.code === 1) {
						this.listshist = res.data
					}
				});
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			hui(id) {

				if (this.isLogin) {
					this.jump('/pages/index/vip_detel', {
						goodsList: '',
						from: id
					});
				} else {
					this.$store.dispatch('showAuthModal');
				}

			},
			yueu(id) {
				alert(id)
				if (id >0) {
					console.log(this.isLogin)
					if (this.isLogin) {

						this.jump('/pages/index/yu_yeu', {
							goodsList: '',
							from: id
						});
					} else {
						this.$store.dispatch('showAuthModal');
					}
				}

			},
			lvshis_s() {
				this.$http('addons.vip', {

				}).then(res => {
					console.log(res, "会员卡")
					if (res.code === 1) {
						this.listshis = res.data.vipList
					}
				});
			},
			kaiguan() {
				this.$http('addons.article_nav', {
			
				}).then(res => {
					console.log(res, "开关")
					if (res.code === 1) {
						this.list = res.data
					}
				});
			},
			// lvshis_s() {
			// 	this.$http('addons.article_banner', {
			// 		id:5,
			// 	}).then(res => {
			// 	    console.log(res,"视频")
			// 		if (res.code === 1) {
			// 	        this.listshi=res.data
			// 		}
			// 	});
			// }
			/**
			 * 获取分类数据
			 *  type4:三级分类， type3:二级分类 ,type2:一级分类,type1:快速购买
			 */
			getCategory() {
				this.$http('category.info', {
					id: this.$Route.query.id ? this.$Route.query.id : 0
				}).then(res => {
					if (res.code === 1) {
						if (res.data?.type) {
							this.categoryType = Number(res.data.type);
							this.categoryStyleId = Number(res.data.id);
							// uni.setNavigationBarTitle({
							// 	title: res.data?.name
							// });
						}
					}
				});
			}
		}
	};
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.category-box {
		padding: 30rpx;

		// height: 100%;
		// flex: 1;
		// overflow: hidden;
		.a {
			width: 100%;
			height: 100rpx;
		}

		.ka {
			margin-bottom: 20rpx;
			width: 100%;
			height: 298rpx;
			border-radius: 20rpx;
		}

		.ti_name {
			margin-bottom: 20rpx;
			margin-top: 20rpx;
			font-size: 30rpx;
			font-family: Microsoft YaHei-Bold, Microsoft YaHei;
			font-weight: bold;
			color: #333333;
		}
	
	.list {

			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;

			.box {
				margin-bottom: 40rpx;
				width: 26%;
				text-align: center;

				image {
					width: 92rpx;
					height: 92rpx;
				}

				view {
					font-size: 28rpx;
					font-family: Microsoft YaHei-Regular, Microsoft YaHei;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
</style>
